<template>
	<div class="tabs">
		<router-link class="link ahome" to="/">首页</router-link>
		<router-link class="link acate" to="/category">分类</router-link>
		<router-link class="link aball" to="/ball">米圈</router-link>
		<router-link class="link acart" to="/cart" style="position: relative;"> 
		<BadgeCom :text="$store.getters.totalCount"></BadgeCom>
		购物车</router-link>
		<router-link class="link auser" to="/user">我的</router-link>
	</div>
</template>

<script>
	import BadgeCom from '@/components/BadgeCom.vue'
	export default{
		components:{ BadgeCom}
	}
</script>

<style lang="scss" scoped="scoped">
	.tabs{
		display: flex;
		background-color: #fafafa;
		.link{
			flex:1;
			text-align: center;
			color:#999;
			font-size: .18rem;
		}
		.router-link-exact-active{
			color:#f70;
		}
		.link:before{
			content:"";
			display: block;
			width: .5rem;
			height: .5rem;
			background-image: url(../assets/home.png);
			background-repeat: no-repeat;
			background-size: cover;
			margin: 3px auto;
		}
		.router-link-exact-active:before{
			background-image: url(../assets/home-h.png);
		}
		.acate:before{
			background-image: url(../assets/cat.png);
		}
		.acate.router-link-exact-active:before{
			background-image: url(../assets/cat-h.png);
		}
		.aball:before{
			background-image: url(../assets/ball.png);
		}
		.aball.router-link-exact-active:before{
			background-image: url(../assets/ball-h.png);
		}
		.acart:before{
			background-image: url(../assets/cart.png);
		}
		.acart.router-link-exact-active:before{
			background-image: url(../assets/cart-h.png);
		}
		.auser:before{
			background-image: url(../assets/user.png);
		}
		.auser.router-link-exact-active:before{
			background-image: url(../assets/user-h.png);
		}
		
	}
</style>
